<template>
    <div :class="`config ${configPanel ? 'show' : ''}`">
        <span class="arrow" @click="(configPanel = !configPanel)"></span>

        <NodeConfig v-if="(type === 'node')" :node="node" @change="change" />
        <EdgeConfig v-if="type === 'edge'" :node="node" @change="change" />
        <ComboConfig v-if="type === 'combo'" :node="node" @change="change" />

        <span @click="saveJson" class="fc">
            <el-tooltip content="获取json" placement="left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-JSON"></use>
                </svg>
            </el-tooltip>
        </span>
        <span @click="exportImage" class="fc">
            <el-tooltip content="导出图片" placement="left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tupian"></use>
                </svg>
            </el-tooltip>
        </span>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue';
import ComboConfig from './combo/index.vue';
import EdgeConfig from './edge/index.vue';
import NodeConfig from './node/index.vue';
interface IProps {
    node: any,
    type: string
}
const emit = defineEmits(["change", "saveJson", "exportImageDownload"])
const props = defineProps<IProps>()
let node = ref({})
let str = ref("")

watch(props, (nv, ov) => {
    if (nv.type) {
        node.value = nv.node
        // 触发watch,保证视图更新
        setTimeout(() => {
            str.value = Math.random() + ''
        }, 50);
    }
}, {
    deep: true
})

let configPanel = ref(true)

const change = (item: any) => {
    emit('change', item)
}
// 获取json数据
const saveJson = () => {
    emit('saveJson')
}
// 导出图片
const exportImage = () => {
    emit('exportImageDownload')
}
</script>

<style lang="less" scoped>
.config {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 10px;
    height: 100%;
    background-color: inherit;
    box-shadow: 9px 0px 26px 2px var(--shadowColor);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 9;
    background-color: var(--background);

    .arrow {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: var(--background);
        left: -30px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        transition: transform .3s ease-in-out;
        border-radius: 100%;
        box-shadow: -3px 0px 5px 0px var(--shadowColor);
        cursor: pointer;

        &::after {
            content: "";
            position: absolute;
            left: calc(50% + 3px);
            top: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            width: 15px;
            height: 15px;
            border-left: 2px solid var(--color);
            border-top: 2px solid var(--color);
        }
    }

    :deep(svg) {
        width: 30px;
        height: 30px;
    }
}

.show {
    transform: translateX(0);

    .arrow {
        transform: translateY(-50%) rotate(180deg);
        box-shadow: 3px 0px 5px 0px var(--shadowColor);
    }
}

.action {
    list-style: none;
    padding: 0px;
    margin: 0px;

    :deep(li) {
        text-align: center;
        position: relative;
        transition: all .3s;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
            box-shadow: 0px 0px 3px 2px var(--shadowColor);
            border-radius: 8px;

            .icon,
            .color {
                transform: scale(1.3);
            }

            .suoxiao {
                transform: rotate(-45deg) scale(1.3);
            }

            .suoxiao1 {
                transform: rotate(45deg) scale(1.3);
            }
        }

        .icon {
            width: 30px;
            height: 30px;
            margin: 10px;
            transition: all .45s;
            color: var(--color);
            cursor: pointer;
        }
    }

    :deep(.suoxiao) {
        transform: rotate(-45deg);
    }

    :deep(.suoxiao1) {
        transform: rotate(45deg);
    }

    :deep(.el-color-picker__trigger) {
        border: 0px !important;
    }

    :deep(.color) {
        margin: 5px;
    }
}

.fc {
    text-align: center;
    position: relative;
    transition: all .3s;
    display: flex;
    flex-direction: column;
    align-items: center;

    &:hover {
        box-shadow: 0px 0px 3px 2px var(--shadowColor);
        border-radius: 8px;

        .icon,
        .color {
            transform: scale(1.3);
        }

        .suoxiao {
            transform: rotate(-45deg) scale(1.3);
        }

        .suoxiao1 {
            transform: rotate(45deg) scale(1.3);
        }
    }

    .icon {
        width: 30px;
        height: 30px;
        margin: 10px;
        transition: all .45s;
        cursor: pointer;
    }
}



.big {
    transform: scale(1.1);
}

.small {
    width: 20px !important;
}
</style>